@charset "utf-8";

$fontcolor:#36a9f6;
$color6:#666666;
$colord:#dddddd;
$red:#ff1319;

$font-size:100px;
@function r($px){
    @return $px/$font-size * 1rem;
}


#web{
    position: relative;
    width: 100%;
    min-height: 100%;
    background-color: #ffffff;
}

.page{
    display: none;
}

//语言选择栏
.language-select{
    width: 100%;
    height: r(80px);
    line-height: r(80px);
    border-bottom: 1px solid #dddddd;
    div{
        float: left;
        width: 50%;
        font-size: r(30px);
        color: #999999;
        text-align: center;
    }
    div.active{
       color: $fontcolor; 
    }
}

//广告
.advertis{
    position: relative;
    width: 100%;
    height: r(100px);
    line-height: r(100px);
    text-align: center;
    overflow: hidden;
    background: url(../img/advertis.jpg) no-repeat center;
    background-size: 100%;
}


//填写内容区域
.content{
    font-size: r(30px);
    color: $color6;
    margin-bottom:r(50px);
    padding: 0 r(20px);
    input{
        font-size: r(32px);
        color: #333333;
        background-color: transparent;
        padding:0 r(20px); 
        &::-webkit-input-placeholder {
            color: $colord;
            font-size: r(30px);
        }
        &:-ms-input-placeholder { // IE10+
            color: $colord;
            font-size: r(30px);
        }
        &:-moz-placeholder { // Firefox4-18
            color: $colord;
            font-size: r(30px);
        }
        &::-moz-placeholder { // Firefox19+
            color: $colord;
            font-size: r(30px);
        }
    }
    input.active{
        &::-webkit-input-placeholder {
            color: $red;
        }
        &:-ms-input-placeholder { // IE10+
            color: $red;
        }
        &:-moz-placeholder { // Firefox4-18
            color: $red;
        }
        &::-moz-placeholder { // Firefox19+
            color: $red;
        }
    }
    &>div{
        width: 100%;
    }
    .content-top{
        &>div{
            height: r(80px);
            line-height: r(80px);
            font-size: 0;
            label{
                font-size: r(30px);
            }
        }
        //用户姓名、次数
        .user-info{
            input{
                width: r(145px);
            }
        }
        //产品名称
        .user-product{
            input{
                width: r(300px);
            }
        }
    }
    .content-img{
        width: 100%;
        height: r(300px);
        text-align: center;
        vertical-align: middle;
        margin: r(40px) 0;
        .img-wrap{
            width: r(300px);
            height: r(300px);
            margin: 0 auto;
            &>img{
                display: none;
                width: 100%;
                height: 100%;
                vertical-align: middle;
            }
        }
        .upload{
            position: relative;
            width: 100%;
            height: 100%;
            margin: 0 auto;
            border: 1px solid #cccccc;
            -webkit-border-radius: r(4px); 
            -moz-border-radius: r(4px); 
            border-radius: r(4px); 
            img{
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
                width: r(70px);
                height: r(70px);
                vertical-align: middle;
            }
            p{
                position: absolute;
                left: 0;
                right: 0;
                bottom: r(30px);
                margin: 0 auto;
                color: #cccccc;
                font-size: r(28px);
            }
            &.active{
                p{
                    color: $red;
                }
            }
        }
    }
    .content-bottom{
        padding-bottom: r(40px);
        &>div{
            height: r(80px);
            line-height: r(80px);
            font-size: 0;
            label{
                font-size: r(30px);
            }
            input{
                width: 80%;
            }
        }
        .submit-btn{
            width: 100%;
            font-size: r(32px);
            color: $fontcolor;
            border: 1px solid $fontcolor;
            -webkit-border-radius: r(8px); 
            -moz-border-radius: r(8px); 
            border-radius: r(8px); 
            text-align: center;
            margin-top:r(20px);
        }
    }
}



//提示弹窗
.alert-view,.tailor-view{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.2);
    overflow: hidden;
}
.alert-view{
    .alert{
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: r(560px);
        height: r(200px);
        background: #fff;
        -webkit-border-radius: r(10px); 
        -moz-border-radius: r(10px); 
        border-radius: r(10px); 
        text-align: center;
        p{
            width: 100%;
            height: r(100px);
            line-height: r(100px);
            font-size: r(30px);
            color: #666666;
            border-bottom: 1px solid #cccccc;
        }
        div{
            height: r(100px);
            line-height: r(100px);
            color: $fontcolor;
            font-size: r(32px);
            cursor: pointer;
        }
    }
}


//裁剪页面
.tailor-view{
    background-color: #fff;
    text-align: center;
    overflow: hidden;
    .avatrwrap{
        width: 100%;
        height: 100%;
    }
    img{
        width: 100%;
        vertical-align: middle;
    }
    #crop{
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        height: r(80px);
        line-height: r(80px);
        color: $fontcolor;
        font-size: r(32px);
        background-color: #fff;
        z-index: 999;
    }
}



//过渡页面
.loadpage{
    position: fixed;
    width: 100%;
    height: 100%;
    background: url(../img/load2.jpg) no-repeat center;
    background-size:100%;
    z-index: 999;
    .logo{
        position: absolute;
        top: r(30px);
        left: r(30px);
        width: r(182px);
        height: r(45px);
        background: url(../img/logo.png) no-repeat center;
        background-size:100%;
    }
    .center{
        position: absolute;
        bottom: r(300px);
        left: 0;
        width: 100%;
        .title{
            width: r(573px);
            height: r(110px);
            background: url(../img/title.png) no-repeat center;
            background-size:100% 100% ;
            margin: 0 auto;
        }
        .t-text{
            width: r(358px);
            height: r(113px);
            background: url(../img/advertis-text.png) no-repeat center;
            background-size:100% 100% ;
            margin: r(30px) auto 0;
        }
    }
    .load-btn{
        position: absolute;
        bottom: r(100px);
        left: 0;
        right: 0;
        margin: 0 auto;
        width: r(512px);
        height: r(69px);
        background: url(../img/btn-bg.png) no-repeat center;
        background-size:100% 100%;
        &>div{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto;
            width: r(265px);
            height: 100%;
        }
        .btn-text{
            width: r(203px);
            height: r(32px);
            background: url(../img/btn-text.png) no-repeat center;
            background-size:100% 100%;
            margin: r(18px) r(10px) r(18px) 0;
        }
        .btn-right{
            width: r(16px);
            height: r(27px);
            background: url(../img/btn-icon.png) no-repeat center;
            background-size:100% 100% ;
            margin: r(21px) 0 r(21px) r(8px);
        }
        .first{
            animation: loadfirst 2s linear 2.1s infinite;
        }
        .second{
            animation: loadsecond 2s linear 2.1s infinite;
        }
        @keyframes loadsecond{
            0%,100%{
                opacity: 1;
            }
            50%{
                opacity: 0.1;
            }
        }
        @keyframes loadfirst{
            0%,100%{
                opacity: 0.1;
            }
            50%{
                opacity: 1;
            }
        }
    }
}



.english-view{
    display: none;
    .advertis{
        background-image: url(../img/adver-en.jpg);
    }
    .content-top{
        font-size: r(27px);
        p{
            height: r(70px);
            line-height: r(70px);
            color: #666666;
        }
        .user-info input{
            width: r(215px);
        }
        .user-product input{
            width: r(500px);
        }
    }
    .content-img{
        margin: r(40px) 0 r(50px);
        .upload p{
            font-size: r(25px);
        }
    }
    .content-bottom{
        &>div{
            margin-bottom: r(20px);
            input{
                width: 100%;
                height: 100%;
                border: 1px solid #CCCCCC;
                -webkit-border-radius: r(8px);
                -moz-border-radius: r(8px);
                border-radius: r(8px);
            }
        } 
        .submit-btn{
            margin: r(40px) 0;
        }
    }
}


.page.active{
    .chinese-view{
        display: none;
    }
    .english-view{
        display: block;
    }
}